<template>
  <div class="chart_main">
    <div v-show="state.option.show" ref="barChart"></div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref, defineProps, reactive, computed, watch} from "vue";
import * as echarts from "echarts";
import {copyDefinedProperties} from "../../../../utils/copy.ts"
defineOptions({
  name: 'Bar'
})
const props = defineProps(['option']);
const barChart=ref(null)
const state = reactive({
  option:{
    height:200,
    width:300,
    threshold:80,
    xseries:['一', '二', '三', '四', '五', '六', '日'],
    left:0,
    top:0,
    show:true,
    overStyle:{
      color: '#e64045',
      borderColor:'#e64045',
      shadowColor: '#e64045',
    },
    underStyle:{
      color:'#ffffff',
      borderColor: '#73c0de',
      shadowColor: '#5470c6',
    }
  },
  window:{
    height:1700,
    width:800,
  }
});
watch(()=>props.option,(newValue,oldValue)=>{
  // console.log('workOrder变化了',newValue,oldValue)
  setting()
},{immediate:true,deep:true})
onMounted(()=>{
  setting()
  initBarChart()
})
function setting(){
  if(props.option!==undefined){
    // console.log(props.option)
    copyDefinedProperties(props.option,state.option)
    state.window={
      width: document.body.clientWidth,
      height: document.body.clientHeight
    }
  }
}
let ebarchart
let canvas
const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
window.addEventListener('resize',()=>{
  // console.log("width,height",document.body.clientWidth,document.body.clientHeight)
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
  ebarchart.resize(getChartSize())
})
function getChartSize(){
  return{
    width:(state.option.width/100)*state.window.width,
    height:(state.option.height/100)*state.window.height
  }
}
function initBarChart(){
  let data=[
    {value:0},
    {value:0},
    {value:0},
    {value:0},
    {value:0},
    {value:0},
    {value:0},
  ]
  ebarchart=echarts.init(barChart.value,null,getChartSize())
  //修改样式(防止被挡)
  canvas=ebarchart.getZr().dom
  canvas.style.zIndex=9999
  // canvas.style.position="absolute"
  // canvas.style.top=`${state.option.top}px`
  // canvas.style.left=`${state.option.left}px`
  SetOption(data)
}
function SetOption(data){
  if(ebarchart!==undefined){
    for(let i=0;i<data.length;++i){
      if(data[i].value>state.option.threshold){
        data[i].itemStyle={
          color: state.option.overStyle.color,
          borderColor:state.option.overStyle.borderColor,
          shadowColor: state.option.overStyle.shadowColor,
          borderType: 'dashed',
          opacity: 0.5
        }
      }
    }
    ebarchart.setOption({
      tooltip:{
      },
      grid: {
        left: '5%',
        right: '10%',
        bottom: '15%',
        containLabel: true
      },
      xAxis: {
        data:state.option.xseries
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data:data,
          itemStyle: {
            barBorderRadius: 5,
            borderWidth: 1,
            borderType: 'solid',
            color:state.option.underStyle.color,
            borderColor: state.option.underStyle.borderColor,
            shadowColor: state.option.underStyle.shadowColor,
            shadowBlur: 3
          }
        }
      ]
    });
  }
}

defineExpose({SetOption})
</script>

<style scoped>
 .chart_main{
   position: absolute;
   left:v-bind(left);
   top:v-bind(top);
 }
</style>
